<template>
  <div>
    <div 
      class="shop-list"
      v-for="(item,index) of shopListData"
      :key="index"
      @click="toGoodsDetail(item)"
      >
      <div class="shop-list-left"><img :src="item.thumb_url" alt="" model="widthFill"></div>
      <div class="shop-list-right">
        <div class="shop-name">{{item.name}}</div>
        <div class="shop-intro">{{item.info}}</div>
        <div class="shop-price">￥{{item.m_price}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['shopListData'],
  methods: {
    toGoodsDetail(item){
      wx.navigateTo({url:`/pages/goodsDetail/main?id=${item.id}`})
    }
  },
}
</script>
<style lang='stylus' scoped>
  .shop-list
    width 100%
    height 200rpx
    pading 10rpx
    margin-bottom 20rpx
    display flex
    justify-content center
    align-items center
    .shop-list-left
      width 50%
      height 100%
      img
        width 100%
        height 200rpx
    .shop-list-right
      width 50%
      height 100%
      padding 0 20rpx
      font-size 13px
      display flex
      flex-direction column
      justify-content center
      align-items center
      .shop-name
        width 100%
        text-align left 
        height 40rpx
        line-height 26rpx
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-line-clamp 1
        -webkit-box-orient vertical
      .shop-intro
        width 100%
        text-align left 
        height 99rpx
        line-height 25rpx
        font-size 12px
        color #ccc
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-line-clamp 4
        -webkit-box-orient vertical
      .shop-price
        width 100%
        text-align left 
        height 60rpx
        line-height 60rpx
        color red
        font-weight 500 
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-line-clamp 1
        -webkit-box-orient vertical
</style>